<!-- eslint-disable prettier/prettier -->
<template>
    <div>
      <Breadcrumb :items="['menu.system', '调解人员']" />
      <div>
        <a-spin :loading="pageLoading?.loading" style="width: 100%">
          <CardConponents>
            <a-button type="primary" @click="handleClick">新增</a-button>
          </CardConponents>
          <CardConponents>
            <a-table :data="dataList?.list" :pagination="pagination">
              <template #columns>
                <a-table-column title="id" data-index="id"></a-table-column>
                <a-table-column title="姓名" data-index="name"></a-table-column>
                <a-table-column title="联系电话" data-index="phone"></a-table-column>
                <a-table-column title="单位" data-index="unit"></a-table-column>
                <a-table-column title="擅长调解纠纷" data-index="disputes"></a-table-column>
                <a-table-column title="排序" data-index="sort"></a-table-column>
                <a-table-column title="状态" data-index="status">
                  <template #cell="{ record }">
                    {{ showStatus('status', record) }}
                  </template>
                </a-table-column>
                <a-table-column title="创建时间" data-index="create_time">
                  <template #cell="{ record }">
                    {{ record.create_time ? getTime(Number(record?.create_time)) : '' }}
                  </template>
                </a-table-column>
                <a-table-column title="操作">
                  <template #cell="{ record }">
                    <a-button type="primary" size="small" @click="handleEdidClick(record)">编辑</a-button>
                    <a-popconfirm content="确定要删除吗?" type="error" @ok=handleDelClick(record)>
                      <a-button type="primary" status="danger" size="small">删除</a-button>
                    </a-popconfirm>
                  </template>
                </a-table-column>
              </template>
            </a-table>
          </CardConponents>
          <a-modal :maskClosable=false v-model:visible="visible" :title="form.Id > '0' ? '新增' : '编辑'" :footer="false">
            <a-form :model="form" @submit="handleSubmit">
              <a-form-item field="Name" label="姓名">
                <a-input v-model="form.Name" />
              </a-form-item>
              <a-form-item field="Phone" label="联系电话">
                <a-input v-model="form.Phone" />
              </a-form-item>
              <a-form-item field="Disputes" label="擅长调解纠纷">
                <a-input v-model="form.Disputes" />
              </a-form-item>
              <a-form-item field="Unit" label="单位">
                <a-input v-model="form.Unit" />
              </a-form-item>
              <a-form-item field="Sort" label="排序">
                <a-input v-model="form.Sort" />
              </a-form-item>
              <a-form-item field="StatusEd" label="状态">
                <a-switch :default-checked="form.StatusEd" v-model="form.StatusEd" />
              </a-form-item>
              <div class="btn">
                <a-button style="width: 100px;margin-right: 10px;" @click="cancelClick">
                  取消
                </a-button>
                <a-button style="width: 100px;" type="primary" html-type="submit" long :loading="loading">
                  提交
                </a-button>
              </div>
            </a-form>
          </a-modal>
        </a-spin>
      </div>
    </div>
  </template>
  
  
  <script lang="ts" setup>
  import CardConponents from '@/components/card/index.vue';
  import { reactive, ref } from 'vue';
  import useLoading from '@/hooks/loading';
  import { onMounted } from 'vue';
  import { Message } from '@arco-design/web-vue';
  import { list, add, edit, del } from '@/api/mediators';//获取列表
  import { getTime } from '@/utils/auth'
  
  onMounted(() => {
    getList()
  });
  
  const { loading, setLoading } = useLoading();
  
  const pageLoading: any = reactive({ loading: false });
  
  const pagination = { pageSize: 10 }
  const form: any = reactive({
    Phone: '',
    Name: '',
    Unit:'',
    Disputes:'',
    Sort:'',
    StatusEd: '',
    Id: '',
  });
  const visible = ref(false);
  const cancelClick = () => {
    visible.value = false;
    form.Name = ''
    form.Unit = ''
    form.Phone = ''
    form.Disputes = ''
    form.Sort = ''
    form.StatusEd = ''
    form.Id = ''
  }
  //新增弹框
  const handleClick = () => {
    visible.value = true;
    form.Phone = ""
    form.Unit = ""
    form.Name = ""
    form.Disputes = ""
    form.Sort = ""
    form.Id = ""
    form.StatusEd = ""
  };
  

  const showStatus = (type: any, value: any) => {
    return value.status === 1 ? '正常' : '禁止'
  }
  
  //数据
  const dataList: any = reactive({
    list: [],
    total: 0
  });
  
  //请求
  const getList = async () => {
    pageLoading.loading = true
    const res = await list({ data: { Offset: 0, Limit: 100 } })
    pageLoading.loading = false
    dataList.list = res?.data?.List
    dataList.total = res?.data?.Total
  }
  
  //新增
  const handleSubmit = async ({ errors, values }: any) => {
    if (loading.value) return;
    if (!errors) {
  
      if (values.StatusEd == "true" || values.StatusEd == true) {
        values.Status = 1
      } else {
        values.Status = 0
      }
  
      try {
        setLoading(true);
        if (form.Id > 0) {
          const res: any = await edit(values);
          Message.success(res?.msg);
          setLoading(false);
  
          if (res?.code == 1) {
            visible.value = false;
            getList()
          }
        } else {
          const res: any = await add(values);
          Message.success(res?.msg);
          setLoading(false);
  
          if (res?.code == 1) {
            visible.value = false;
            getList()
          }
        }
      } catch (error) {
        setLoading(false);
      }
    }
  };
  
  // 修改
  const handleEdidClick = (value: any) => {
    visible.value = true;
    form.Phone = value.phone
    form.Name = value.name
    form.Disputes = value.disputes
    form.Sort = value.sort
    form.Id = value.id
    form.Unit   = value.unit
    form.StatusEd = value.status == 1 ? true : false;
  }
  
  // 删除
  const handleDelClick = async (value: any) => {
    const res: any = await del({ Id: value?.id });
    if (res?.code === 1) {
      Message.success('删除成功')
      getList()
    }
  }
  
  </script>
  
  <script lang="ts">
  export default {
    name: 'Mediators',
  };
  </script>
  
  <style lang="less" scoped>
  .btn {
    display: flex;
    justify-content: flex-end;
  }
  </style>
  